<template>
  <div class="ele-body task-info" v-loading="loading">
    <el-row :gutter="15">
      <el-col :span="8">
        <el-card class="card" shadow="never">
          <span slot="header" class="card-title">问题详情</span>
          <div class="left-content">
            <div>
              <span>问题标题：</span>
              <span>{{ info.title || '--' }}</span>
            </div>
            <div>
              <span>问题状态：</span>
              <span>{{ info.status_text || '--' }}</span>
            </div>
            <div>
              <span>问题ID：</span>
              <span>{{ info.id || '--' }}</span>
            </div>
            <div>
              <span>问题级别：</span>
              <span>{{ info.level || '--' }}</span>
            </div>
            <div>
              <span>问题来源：</span>
              <span>{{ info.source || '--' }}</span>
            </div>
            <div>
              <span>关联项目：</span>
              <span>{{ info.project_name || '--' }}</span>
            </div>
            <div>
              <span>关联任务：</span>
              <span>{{ info.task_name || '--' }}</span>
            </div>
            <div>
              <span>问题提出人：</span>
              <span>{{ info.create_user_name || '--' }}</span>
            </div>
            <div>
              <span>问题提出时间：</span>
              <span>{{ info.create_time || '--' }}</span>
            </div>
            <div>
              <span>问题负责人：</span>
              <span>{{ info.charge_user_name || '--' }}</span>
            </div>

            <div>
              <span>问题描述：</span>
              <span>{{ info.description || '--' }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="card" shadow="never">
          <span slot="header" class="card-title">问题解决</span>
          <el-form :model="form" ref="formRef" label-width="auto" class="right-content" :rules="rules">
            <el-form-item label="问题分类：" prop="category">
              <el-select v-model="form.category" placeholder="请选择" :disabled="info.resolve != null||!info.button_done">
                <el-option
                  v-for="item in category"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="问题解决时间：" prop="resolve_date">
              <el-date-picker
                :disabled="info.resolve != null||!info.button_done"
                v-model="form.resolve_date"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="问题解决人：" prop="user_ids">
              <PrincipalSelect :disabled="info.resolve != null||!info.button_done" ref="principalSelectRef" placeholder="请选择问题解决人"
                               :limit="true"
                               v-model="form.user_ids" :custom-options="headOptions"/>
            </el-form-item>
            <el-form-item label="问题原因分析：" prop="reason">
              <el-input :disabled="info.resolve != null||!info.button_done" v-model="form.reason" type="textarea" :autosize="{ minRows: 4}"
                        maxlength="200"
                        show-word-limit/>
            </el-form-item>
            <el-form-item label="解决方案：" prop="scheme">
              <el-input :disabled="info.resolve != null||!info.button_done" v-model="form.scheme" type="textarea" :autosize="{ minRows: 4}"
                        maxlength="200"
                        show-word-limit/>
            </el-form-item>
            <el-form-item label="备注：" prop="description">
              <el-input :disabled="info.resolve != null||!info.button_done" v-model="form.description" type="textarea"
                        :autosize="{ minRows: 4}" maxlength="200"
                        show-word-limit/>
            </el-form-item>
            <el-form-item style="display: flex;justify-content: space-around" v-if="info.resolve == null&&info.button_done">
              <el-button type="primary" @click="onSave" :loading="loading2">保存</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PrincipalSelect from "@/views/project/task/components/PrincipalSelect.vue";

export default {
  name: "index",
  components: {PrincipalSelect},
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() >= Date.now();
        }
      },
      id: null,
      loading: false,
      loading2: false,
      info: {},
      form: {
        category: null,
        user_ids: [],
        scheme: null,
        reason: null,
        resolve_date: null,
        description: null,
      },
      rules: {
        category: [{required: true, message: "问题分类为必需", trigger: "change"}],
        resolve_date: [{required: true, message: "问题解决时间为必需", trigger: "change"}],
        user_ids: [{required: true, message: "问题解决人为必需", trigger: "change"}],
      },
      headOptions: [],
      category: [],
    }
  },
  watch: {
    $route() {
      if (this.$route.path === '/project/feedback/info') {
        this.id = this.$route.query.id
        this.handleQueryInfo(this.id)
        this.onReset()
      }
    }
  },
  created() {
    this.getParams()
    this.id = this.$route.query.id
    this.handleQueryInfo(this.id)
  },
  methods: {
    onSave() {

      this.$refs["formRef"].validate((valid) => {
        if (valid) {
          this.loading2 = true
          this.$http.post(`/suggests/${this.id}/resolve`, this.form).then(({data}) => {
            data.success ? this.$message.success(data.msg) : this.$message.error(data.msg)
            this.handleQueryInfo(this.id)
            this.loading2 = false
          })
        }
      });
    },
    onReset() {
      this.$refs.formRef.resetFields()
    },
    async handleQueryInfo(id) {
      this.loading = true
      const res = (await this.$http.get(`/suggests/${id}`)).data
      res.success ? this.info = res.data : this.$message.error(res.msg)
      res.data.resolve && this.handleSetForm(this.info.resolve)
      this.loading = false
    },
    handleSetForm(resolve) {
      const {category, description, reason, resolve_date, scheme, users} = resolve
      this.form = {category, description, reason, resolve_date, scheme, user_ids: users.map(item => item.id)}
      this.headOptions = users.map(item => ({id: item.id, realname: item.name}))
    },
    getParams() {
      this.loading = true
      this.$http.get('/suggests/params').then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          this.level = res.data.data.level
          this.category = res.data.data.category
          this.source = res.data.data.source
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.left-content {
  overflow-y: auto;
  height: calc(100vh - 208px);

  > div {
    padding: 10px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;

    > span:nth-child(1) {
      min-width: 105px;
    }

    > span:nth-child(2) {
      display: inline-block;
      flex: 1;
      word-break: break-word;
      margin-left: 25px;
    }

  }

  > div:nth-child(1) {
    padding-top: 0;
  }
}

.right-content {
  overflow: auto;
  height: calc(100vh - 208px);
}

</style>
